<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉刷新和上拉加载更多</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weuix.min.css"/>
 <script src="../zepto.min.js"></script>
 <script src="../updown.js"></script>  
<script>
$(function(){
    var counter = 0;
    // 每页展示4个
    var num =10;
    var pageStart = 0,pageEnd = 0;
    var page=1;
    // dropload
    $('.weui_panel').dropload({
        scrollArea : window,
        autoLoad : true,
  domDown : {//上拉
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh f15 "><i class="icon icon-12"></i>上拉加载更多</div>',
            domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>',
            domNoData  : '<div class="dropload-noData">没有更多数据了</div>'
        },
        domUp : {//下拉
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh"><i class="icon icon-12 xz180"></i>上拉加载更多</div>',
            domUpdate  : '<div class="dropload-load f15"><i class="icon icon-12"></i>释放更新...</div>',
            domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>'
        },
                loadUpFn : function(me){//刷新
            $.ajax({
                type: 'GET',
                url: 'more-update.json',
               
                dataType: 'json',
                success: function(data){
                    var result = '';
                    for(var i = 0; i < data.lists.length; i++){
result+='<div class="weui_media_box weui_media_text weui-updown"><p class="weui_media_desc">'+data.lists[i].link+data.lists[i].title+'</p></div>';
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $('.weui_panel_bd').html(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                        // 重置索引值，重新拼接more.json数据
                        counter = 0;
                        // 解锁
                        me.unlock();
                        me.noData(false);
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadDownFn : function(me){//加载更多
            $.ajax({
                type: 'GET',
                url: 'more.json',
                dataType: 'json',
                 data:{page:page},
                success: function(data){
                    var result = '';
                    counter++;
                    pageEnd = num * counter;
                    pageStart = pageEnd - num;
                     page++;
                    for(var i = pageStart; i < pageEnd; i++){
                        result+='<div class="weui_media_box weui_media_text weui-updown"><p class="weui_media_desc">'+data.lists[i].link+data.lists[i].title+'</p></div>';
                        if((i + 1) >= data.lists.length){
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                            break;
                        }
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $('.weui_panel_bd').append(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        }
    });
});
</script>      

 <style>
</style>
 
 
</head>

<body ontouchstart>
<div class="weui_cells_title" >支持单独调用刷新或加载更多</div>
  <div class="weui_panel weui_panel_access" >
           
            <div class="weui_panel_bd">
                    
            </div>
            
        </div>
      
</body>
</html>
